<!--
 * @Author: Y先森
 * @Date: 2023-04-24 10:53:49
 * @LastEditors: y && 250048395@qq.com
 * @LastEditTime: 2023-05-09 10:15:31
 * @FilePath: \y-website\src\views\craftShare\index.vue
-->
<template>
    <div
      class="h-full box-border overflow-y-hidden px-5"
      style="scrollbar-gutter: stable;"
    >
      <navigation-vue></navigation-vue>
      <div class=" flex justify-between xl:mt-1">
        <list-vue class="mr-2"></list-vue>
        <div class="w-1/3 bg-white rounded h-32 p-3 text-base font-semibold dark:bg-indigo-dark-d ">日期控件</div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'home'
  }
  </script>
  
  <script setup>
  import { isMobileTerminal } from '@/utils/flexible'
  import navigationVue from './components/navigation/index.vue'
  import listVue from './components/list/index.vue'
  import { useRouter } from 'vue-router'
  import { useStore } from 'vuex'
  import { useScroll } from '@vueuse/core'
  import { onActivated, ref } from 'vue'

  const activeName = ref('first')

  const handleClick = (tab, event) => {
    // console.log(tab, event)
  }
  
  const store = useStore()
  const router = useRouter()
  
  /**
   * VIP 按钮点击事件
   */
  const onVipClick = () => {
    // 配置跳转方式
    store.commit('app/changeRouterType', 'push')
    router.push('/member')
  }
  /**
   * 我的按钮点击事件
   */
  const onMyClick = () => {
    // 配置跳转方式
    store.commit('app/changeRouterType', 'push')
    if (store.getters.token) {
      router.push('/profile')
    } else {
      router.push('/login')
    }
  }
  
  /**
   * 记录页面滚动位置
   */
  const containerTarget = ref(null)
  const { y: containerTargetScrollY } = useScroll(containerTarget)
  // 被缓存的组件再次可见，会回调 onActivated 方法
  onActivated(() => {
    if (!containerTarget.value) {
      return
    }
    containerTarget.value.scrollTop = containerTargetScrollY.value
  })
  </script>

<style scoped>
.el-tabs__nav-wrap::after {
  height: 0 !important;
}
.el-tabs__item.is-active {
  color: #7b7ef4 !important;
}
.el-tabs__active-bar {
  background-color: #7b7ef4 !important;
}
.el-tabs__item:hover {
  color: #7b7ef4 !important;
}
</style>
  